<script setup lang="ts">
import { AddBoxOutlined } from "@vicons/material";
import { DataTableColumns, NButton, NFormItem, NInput } from 'naive-ui';
import { h, inject, onMounted, ref, watch } from 'vue';
import { v4 as uuidv4 } from 'uuid';

const props = defineProps(["value"])

function createData(): any[] {
    if (props?.value) {
        return props?.value
    }
    return [
        {
            key: 0,
            name: '',
            hardware: '服务器AB345A1',
            nature: '新建',
            cabinet: '600×1100×2200（新增机柜）',
            num: '2',
            power: '1800',
            col: [0, 2],
            manufactor: '某司',
            uuid: 1001,
        },
        {
            key: 1,
            name: '',
            hardware: '交换机ABX123456X-12DU-SD',
            nature: '新建',
            cabinet: '600×1100×2200（新增机柜）',
            num: '2',
            power: '1800',
            manufactor: '某司',
            uuid: 1001,
        },
        {
            key: 2,
            name: '',
            hardware: '防火墙LEabcsEF2000-AB-CD',
            nature: '新建',
            cabinet: '600×1100×2200（新增机柜）',
            num: '2',
            power: '1800',
            manufactor: '某司',
            uuid: 1001,
        }
    ]
}
const steps = inject('steps') as any
const machine_room_nameRef = ref(null)
watch(() => steps, (newVal) => {
    machine_room_nameRef.value = newVal?.data?.value?.step1?.f5;
}, { deep: true })

const data = ref(createData())
const createColumns = (): DataTableColumns<any> => [

    {
        title: '网元名称',
        key: 'name',
        render(row, index) {
            return h(NFormItem, {
                path: `wy[${index}].name`,
                rule: {
                    required: true,
                    message: '请输入网元名称',
                    trigger: 'input',
                }
            }, {
                default: () => [
                    h(NInput, {
                        value: row.name,
                        bordered: false,
                        class: 'bg-transparent',
                        placeholder: '请输入网元名称',
                        onUpdateValue(v) {
                            data.value[index].name = v
                        },
                        onInput(v) {
                            data.value[index].name = v
                        }
                    })
                ]
            })
        },
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
    },
    {
        title: '厂家',
        key: 'manufactor',
        align: 'center'
    },
    {
        title: '硬件平台',
        key: 'hardware',
        align: 'center'
    },
    {
        title: '建设性质',
        key: 'nature',
        align: 'center'
    },
    {
        title: '设备机柜尺寸',
        key: 'cabinet',
        align: 'center',
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
    },
    {
        title: '数量',
        key: 'num',
        align: 'center'
    },
    {
        title: '供电要求w(单台)',
        key: 'power',
        align: 'center'
    },
    {
        title: '设备位置',
        key: 'location',
        align: 'center',
        rowSpan: (rowData, rowIndex) => {
            return rowData?.col?.[0] === rowIndex ? rowData?.col?.[1] - rowData?.col?.[0] + 1 : 0
        },
        render: () => {
            return machine_room_nameRef.value
        }
    }
]
const emit = defineEmits(['update:value'])
watch(() => data, (data) => {
    emit('update:value', data.value)
}, {
    deep: true
})

const formValue = inject("formValue")

const addRow = () => {
    const uuidStr = uuidv4();
    if (!formValue.f11) {
        formValue.f11 = 1
    }
    formValue.f11 += 1;
    data.value.push({
        key: data.value.length - 1,
        hardware: '服务器AB345A1',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        col: [data.value.length, data.value.length + 3 - 1],
        manufactor: '某司',
        uuid: uuidStr
    }, {
        key: data.value.length,
        name: '',
        hardware: '交换机ABX123456X-12DU-SD',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        manufactor: '某司',
        uuid: uuidStr
    }, {
        key: data.value.length + 1,
        name: '',
        hardware: '防火墙LEabcsEF2000-AB-CD',
        nature: '新建',
        cabinet: '600×1100×2200（新增机柜）',
        num: '2',
        power: '1800',
        manufactor: '某司',
        uuid: uuidStr
    })
}

</script>

<template>
    <div class="mb-2 flex justify-between">
        <div></div>
        <NButton type="primary" @click="addRow">
            <template #icon>
                <n-icon>
                    <AddBoxOutlined />
                </n-icon>
            </template>
            新增网元
        </NButton>
    </div>
    <n-data-table :columns="createColumns()" :single-line="false" :bordered="true" :data="data" />
</template>